<template>
  <div class="wrap">
    <div class="left">
      <ul class="ranking-box">
        <li v-for="item in tableData" :key="item.id" value="item.id" @click="handle(item)">{{item.content}}</li>
      </ul>
    </div>
    <div class="right">
      <pie :data="pieData" ref="pie"></pie>
    </div>
  </div>
</template>

<script>
import pie from "@/components/pie";
export default {
  name: "result",
  components:{
    pie,
  },
  data(){
    return{
      tableData:[{id: '0',content: '属性'},{id: '1',content: '质量'},{id: '2',content: '价格'},{id: '3',content: '材质'},
        {id: '4',content: '颜色'},{id: '5',content: '尺寸'},{id: '6',content: '受众'},
        {id: '7',content: '搭配'},{id: '8',content: '风格'},{id: '9',content: '设计'},{id: '10',content: '态度'}],
      pieData:[{value:1,name:'合身的'},{value:1,name:'喜爱衬衫'},{value:1,name:'出人意料的好'},{value:1,name:'衣服是件宝物'},{value:1,name:'讨人喜欢的衣服'}],
      pieDataList:[[{value:1,name:'上乘'}],
        [{value:1,name:'物有所值'}],
        [{value:1,name:'透明的'},{value:1,name:'轻量级羊毛'}],
        [{value:1,name:'桃色'},{value:1,name:'蓝色'},{value:1,name:'葡萄酒色'},{value:1,name:'实物看起来更亮一点'}],
        [{value:1,name:'不适合身材矮的人'},{value:2,name:'有点大'},{value:2.5,name:'平时穿中号但是这件衣服小号很适合'}],
        [{value:1,name:'瘦小女士'},{value:1,name:'产妇'}],
        [{value:1,name:'牛仔裤'},{value:1,name:'百褶裙'}],
        [{value:1,name:'可爱风'},{value:1,name:'浪漫风'},{value:1,name:'刺绣风'}],
        [{value:1,name:'蕾丝'},{value:1,name:'胳膊破洞完美'},{value:1,name:'缎边拼接'},{value:1,name:'荷叶边'}],
        [{value:1,name:'合身的'},{value:1,name:'喜爱衬衫'},{value:1,name:'出人意料的好'},{value:1,name:'衣服是件宝物'},{value:1,name:'讨人喜欢的衣服'}]
      ]
    }
  },
  methods: {
    handle(item){
      console.log(item.id);
      if(item.id>0){
        this.$refs.pie.refreshData(this.pieDataList[item.id-1]);
      }
    }
  }
}
</script>
<style scoped>
.wrap{
  display: flex;
  margin: 0 1rem;
}
.left{
  flex: 0 0 20%;
}
.right{
  flex: 1;
  /*justify-content: center;*/
  padding-left: 1rem;
}
.ranking-box {
  border: 1px solid #0e94ea;
  background-color: rgba(14, 148, 235, 0.102);
}
ul{
  margin: 0!important;
  padding: 0!important;
}
.ranking-box>li{
  list-style: none;
  height: 1.5rem;
  line-height: 1.5rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  font-size: 1rem;
  color: rgba(255, 255, 255, .7);
}
.ranking-box>li:hover{
  cursor: pointer;
}
.ranking-box>li>span {
  width: 0;
  flex-grow: 1;
  text-align: center;
}
.ranking-box>li:nth-child(2n+1) {
  background: rgba(14, 148, 235, 0.102);
}

.ranking-box>li:first-child {
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 1rem;
  background: rgba(14, 148, 235, 0.8);
}

.ranking-box>li:first-child>p {
  color: white;
}
</style>
